How does changing transform-origin affect rotation or scaling?
Effect of transform-origin on Rotation and Scaling in CSS
The transform-origin property in CSS defines the point around which a transformation (like rotation, scaling, or skewing) occurs. Changing this origin shifts the pivot point, which alters how the element visually rotates or scales.
In this example, the element rotates around its top-left corner instead of its center. By moving the origin, you control the pivot point of rotation, producing different visual effects.
Here, the image grows outward from its bottom-right corner, not from the center. The scaling effect expands relative to the defined origin point.
- 1
center— the default (element transforms from its middle). - 2
top left— transforms occur from the top-left corner. - 3
bottom right— transformations expand or rotate from the bottom-right corner. - 4
50% 100%— equivalent to the middle of the bottom edge.
By adjusting transform-origin, you can create effects like swinging doors, rotating pointers, or zooms that start from a specific direction.
- 1
Use
transform-originto control the pivot of rotation or scaling animations. - 2
Experiment with corner and edge origins for creative effects.
- 3
Keep in mind that changing the origin affects all transform functions applied to the element.